import React, { useState } from 'react';
import { useNavigate, Outlet, useLocation } from "react-router-dom";
import { NavBar, TabBar } from 'antd-mobile';
// 移除图标导入，使用emoji替代
import '../App.css';

// 定义标签栏数据
const tabs = [
    {
        key: '/layout/home',
        title: '首页',
        icon: '🏠',
    },
    {
        key: '/layout/fenlei',
        title: '抢单',
        icon: '📋',
    },
    {
        key: '/layout/message',
        title: '消息中心',
        icon: '💬',
    },
    {
        key: '/layout/my',
        title: '我的',
        icon: '👤',
    },
];

function LayoutPage() {
    const navigate = useNavigate();
    const location = useLocation();
    const [activeKey, setActiveKey] = useState(location.pathname);

    const handleTabChange = (key) => {
        setActiveKey(key);
        navigate(key);
    };

    return (
        <div className="app-layout">
            {/* 路由出口，用于渲染子路由组件 */}
            <div className="outlet-container">
                <Outlet />
            </div>
            {/* 底部标签栏 */}
            <div className="tab-bar-wrapper">
                <TabBar
                    activeKey={activeKey}
                    onChange={handleTabChange}
                    className="custom-tab-bar"
                >
                    {tabs.map((tab) => (
                        <TabBar.Item
                            key={tab.key}
                            title={tab.title}
                            icon={tab.icon}
                            className="tab-item"
                        />
                    ))}
                </TabBar>
            </div>
        </div>
    );
}

export default LayoutPage;